<template>
	<view class="app-container">
		<u-radio-group v-model="gender" activeColor="#1891d6" placement="column" iconPlacement="right"
			borderBottom class="radio-group">
			<u-radio :name="0" label="男" class="radio"></u-radio>
			<u-radio :name="1" label="女" class="radio"></u-radio>
		</u-radio-group>
		<view class="save">
			<button :loading="loading" class="save-btn" @click="handleSave">保 存</button>
		</view>
	</view>
</template>

<script>
	import { updateUserInfo } from "@/api/user.js"
	export default {
		data() {
			return {
				gender: 0,
				loading: false
			}
		},
		methods: {
			handleSave() {
				this.loading = true;
				updateUserInfo({sex:this.gender}).then(res => {
					this.loading = false
					uni.navigateBack()
				})
			},
			focus() {
				let inputEl = document.getElementById("input");
				inputEl.classList.add('input-focus')
			},
			blur() {
				let inputEl = document.getElementById('input');
				inputEl.classList.remove('input-focus')
			},
			
		}
	}
</script>

<style lang="scss">
	.radio-group {
		padding-left: 20px;

		.u-radio-label--right {
			width: 100%;
		}

		.radio {
			padding-right: 20px;
			margin-top: 10px;
		}
	}

	.save {
		padding: 0 20px;

		.save-btn {
			margin-top: 50px;
			color: #fff;
			background-image: linear-gradient(to right, #38dde5, #1891d6);
		}
	}
</style>
